<template>
  <div class="course-card" @click="startExam" ref="course-card">
    <img :src="course.imgUrl" alt="" />
    <div class="profile">
      <span class="name">{{ course.name }}</span>
    </div>
    <el-tag
      v-if="course.disable == true"
      effect="dark"
      size="small"
      style="position: absolute; top: 0; right: 0"
      >敬请期待</el-tag
    >
  </div>
</template>

<script>
export default {
  props: ["course"],
  mounted() {
    if (this.course.disable == true) {
      this.$refs["course-card"].className += " disable";
    }
  },
  methods: {
    startExam() {
      if (this.course.disable == true) {
        return;
      }
      this.$alert("本次考试为模拟考试，题目内容仅供参考", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$router.push("/exam");
        },
      });
    },
  },
};
</script>

<style lang="scss">
.course-card {
  position: relative;
  cursor: pointer;
  width: 240px;
  height: 200px;
  > img {
    width: 100%;
    height: 130px;
    border-radius: 8px;
  }
  .profile {
    .name {
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
    }
  }
  &:hover {
    img {
      box-shadow: 1px 1px 1px 1px rgba(20, 20, 20, 0.1);
    }
    .name {
      color: #3a8bff;
    }
  }
}
.disable {
  cursor: not-allowed;
}
</style>